<template>
  <div style="width: 100%;height: 350px;position: relative" v-loading="loading">
    <div class="chart-div" ref="chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {getVibRaw} from "@/api/raw";

export default {
  name: 'waveChart',
  props: ['vibForm'],
  data() {
    return {
      loading: false,
      //图表对象
      chart: null,
      //图表配置
      chartOptions: null,
      //图表数据
      chartData: null,
      eventTime: null
    }
  },
  watch: {
    vibForm: {
      handler: function (val) {
        this.$nextTick(() => {
          this.getData()
        })
      },
      immediate: true, // 创建实例后立即执行
      deep: true, // 深度监听
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
  },
  methods: {
    getData() {
      this.loading = true;
      this.chartData = null;
      if (!this.vibForm.date || !this.vibForm.eventTime) {
        this.showEmptyChart();
        return;
      }
      getVibRaw(this.vibForm).then(res => {
        this.chartData = res.data
        this.loadData(this.vibForm.axial == null ? 'x' : this.vibForm.axial)
        this.chart.resize()
      }).catch(err => {
        this.showEmptyChart();
      })
    },
    showEmptyChart() {
      let yName = this.vibForm.physicalType === 'acc' ? 'g' : 'mm/s';
      let xName = this.vibForm.signalType === 'ang' ? '圈数' : '时间 - s';
      this.eventTime = null
      this.chartOptions.yAxis.name = yName;
      this.chartOptions.xAxis.name = xName;
      this.chartOptions.xAxis[0].data = [];
      this.chartOptions.series[0].data = [];
      this.chart.setOption(this.chartOptions, true);
      this.chart.showLoading({
        text: '暂无数据',
        showSpinner: false,
        textColor: '#808080',
        maskColor: 'rgba(255, 255, 255, .6)',
        fontSize: '26px',
        fontWeight: '400'
      })
      this.loading = false
    },
    /**
     * 加载图表
     * @param axial
     */
    loadData(axial) {
      if (this.chartData == null) {
        this.showEmptyChart();
        return;
      }
      let yName = this.vibForm.physicalType === 'acc' ? 'g' : 'mm/s';
      let xName = this.vibForm.signalType === 'ang' ? '圈数' : '时间 - s';
      this.eventTime = this.chartData.timestamp
      // let option = this.chart.getOption();
      this.chartOptions.yAxis.name = yName;
      this.chartOptions.xAxis.name = xName;
      this.chartOptions.xAxis[0].data = this.chartData.t;
      this.chartOptions.series[0].data = this.chartData[axial];
      this.chart.setOption(this.chartOptions, true);
      this.chart.hideLoading();
      this.loading = false;
    },
    initChart: function () {
      if (this.chart !== null && this.chart !== undefined) {
        this.chart.dispose();
      }
      this.chartOptions = {
        title: {
          text: '时域',
          textStyle: {
            fontStyle: '',
            color: '#333',
            fontWeight: 'normal',
            fontSize: 14
          },
          top: 0
        },
        toolbox: {
          show: true,
          height: 0,
          top: -5,
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
          },
          itemSize: 18,
          iconStyle: {
            borderColor: '#000000'
          }
        },
        dataZoom: [{
          type: 'inside',
          show: true
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          crossStyle: {
            color: '#999'
          },
          showContent: true
        },
        xAxis: [
          {
            position: 'bottom',
            name: '时间 - s',
            nameLocation: 'center',
            nameTextStyle: {
              padding: [10, 0, 0, 0]
            },
            type: 'category',
            min: 0,
            //横坐标标注线
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: '#3c3f41'
              },
              // interval: 100
            },
            //横坐标标注
            axisLine: {
              show: true,
              lineStyle: {
                color: '#202c3a'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#c6c6c6'
              }
            },
            axisPointer: {
              lineStyle: {
                color: '#E6A23C'
              },
              label: {
                formatter: function (params) {
                  return params.value
                },
                padding: [5, 14],
                margin: 0,
                backgroundColor: '#E6A23C'
              }
            },
            axisLabel: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            name: 'g',
            nameLocation: 'end',
            nameTextStyle: {
              align: 'left',
            },
            type: 'value',
            boundaryGap: ['20%', '20%'],
            splitLine: {
              lineStyle: {
                color: '#f0f0f0'
              }
            },
            //纵坐标线及刻度
            axisLine: {
              show: true,
              lineStyle: {
                color: '#202c3a'
              }
            },
            axisLabel: {
              inside: false
            },
            axisPointer: {
              lineStyle: {
                color: '#E6A23C'
              },
              label: {
                backgroundColor: '#E6A23C'
              }
            },
            axisTick: {
              inside: true
            }
          }
        ],
        grid: {
          top: 50,
          bottom: 20,
          left: 8,
          right: 16,
          containLabel: true
        },
        series: [
          {
            type: 'line',
            // itemStyle: {
            //   color: '#28b1e4'
            // },
            symbol: 'none',
            xAxisIndex: 0,
            lineStyle: {
              width: 1,
              color: "#409EFF",
            },
            emphasis: {
              lineStyle: {
                width: 1
              }
            }
          }
        ]
      };
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.chartOptions);
      let that = this
      onOrientationChange(function () {
        that.chart.resize()
      })
    }
  }
}
var onOrientationChange = function (cb) {
  var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'
  window.addEventListener(evt, resize, true)

  function resize(fals) {
    if (window.orientation === 0 || window.orientation === 180) {
      cb('v')
    } else {
      cb('h')
    }
  }

  resize(true)
}
</script>
<style scoped>
.chart-div {
  width: 100%;
  height: 100%;
}
</style>